<html>

<head>
  <title>9-合成与裁剪</title>
  <style type="text/css">
    canvas {
      border: 1px solid black;
    }

    #typeSelect {
      margin-bottom: 5px;
    }
  </style>
</head>

<body>
  <div>
    <select id="typeSelect">
      <option data-index="source-over">source-over</option>
      <option data-index="source-in">source-in</option>
      <option data-index="source-out">source-out</option>
      <option data-index="source-atop">source-atop</option>
      <option data-index="destination-over">destination-over</option>
      <option data-index="destination-in">destination-in</option>
      <option data-index="destination-out">destination-out</option>
      <option data-index="destination-atop">destination-atop</option>
      <option data-index="lighter">lighter</option>
      <option data-index="copy">copy</option>
      <option data-index="xor">xor</option>
      <option data-index="multiply">multiply</option>
      <option data-index="screen">screen</option>
      <option data-index="overlay">overlay</option>
      <option data-index="darken">darken</option>
      <option data-index="lighten">lighten</option>
      <option data-index="color-dodge">color-dodge</option>
      <option data-index="color-burn">color-burn</option>
      <option data-index="hard-light">hard-light</option>
      <option data-index="soft-light">soft-light</option>
      <option data-index="difference">difference</option>
      <option data-index="exclusion">exclusion</option>
      <option data-index="hue">hue</option>
      <option data-index="saturation">saturation</option>
      <option data-index="color">color</option>
      <option data-index="luminosity">luminosity</option>
    </select>
  </div>
  <canvas id="tutorial" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
  function draw(value) {
    let canvas = document.getElementById('tutorial');
    // 检测支持性
    if (!canvas.getContext) return;
    // 获得 2d 上下文对象
    let ctx = canvas.getContext("2d");

    ctx.clearRect(0, 0, 500, 500);
    // // 1 合成

    // globalCompositeOperation取值
    // 1.source-over 这是默认设置，新图像会覆盖在原有图像
    // 2.source-in 仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)
    // 3.source-out 仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)
    // 4.source-atop 新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。
    // 5.destination-over 新图像会在老图像的下面。与1相反
    // 6.destination-in 仅仅新老图像重叠部分的老图像被显示，其他区域全部透明
    // 7.destination-out 仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。
    // 8.destination-atop 老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。
    // 效果叠加
    // 9.lighter 新老图像都显示，但是重叠区域的颜色做加处理
    // 10.darken 保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)
    // 11.lighten 保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)
    // 12.xor 重叠部分会变成透明
    // 13.copy 只有新图像会被保留，其余的全部被清除边透明

    // ctx.fillStyle = "blue";
    // ctx.fillRect(0, 0, 200, 200);
    // ctx.globalCompositeOperation = value; // 全局合成操作
    // ctx.fillStyle = "red";
    // ctx.fillRect(100, 100, 200, 200);


    // // 2 裁剪

    // ctx.beginPath();
    // ctx.arc(20, 20, 100, 0, Math.PI * 2);
    // ctx.clip();

    // ctx.fillStyle = "pink";
    // ctx.fillRect(20, 20, 100, 100);


    // clip 随机星星例子

    ctx.fillRect(0, 0, 150, 150);
    ctx.translate(75, 75);

    ctx.beginPath();
    ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
    // ctx.clip();

    // 绘制背景
    var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
    lingrad.addColorStop(0, "#232256");
    lingrad.addColorStop(1, "#143778");

    ctx.fillStyle = lingrad;
    ctx.fillRect(-75, -75, 150, 150);

    // 绘制星星
    for (var j = 1; j < 2; j++) {
      ctx.save();
      ctx.fillStyle = "#fff";
      ctx.strokeStyle = "#fff";
      ctx.translate(
        75 - Math.floor(Math.random() * 150),
        75 - Math.floor(Math.random() * 150),
      );
      // drawStar(ctx, Math.floor(Math.random() * 4) + 2);
      drawStar(ctx, 6);
      ctx.restore();
    }

  }

  draw('source-over');

  let selector = document.querySelector("#typeSelect")
  selector.addEventListener('change', function () {
    draw(selector.value);
  })

  function drawStar(ctx, r) {
    ctx.fillStyle = 'red'
    ctx.beginPath();
    ctx.strokeRect(0, 0, 1, 1)
    ctx.closePath();
    ctx.globalCompositeOperation = 'lighter';
    ctx.fillStyle = 'green'
    ctx.save();

    ctx.beginPath();
    ctx.moveTo(r, 0);
    let lineToX;
    for (let i = 0; i < 9; i++) {
      ctx.rotate(Math.PI / 5);
      if (i % 2 == 0) { // 偶数次
        lineToX = (r / 0.525731) * 0.200811
        lineToX = (r / 0.5)
        // ctx.lineTo((r / 0.525731) * 0.200811, 0);
        // ctx.lineTo((r / 0.5) * 0.2, 0);
        ctx.lineTo((r / 0.5), 0);
      } else { // 基数次
        lineToX = r
        ctx.lineTo(r, 0);
      }

      console.log('lineToX', lineToX)
    }
    ctx.closePath();
         ctx.fillStyle = 'blue'
    ctx.fill();

    ctx.stroke()
    ctx.restore();
  }

</script>

</html>